<template>

  <div id="app">
     <el-input v-model="goodsId" placeholder="请输入商品编号" style="width:300px"></el-input>
      <el-button type="primary" @click="getGro" style="background-color:hotpink">查询</el-button>
      <el-button style="background-color:hotpink" icon="el-icon-circle-plus-outline" @click="preAddObject()">添加</el-button>
      <!-- 列表模态框 -->
  <el-table
        border
        :data="tableData"
        style="background:red,width: 100%"
        :row-class-name="tableRowClassName"
        :default-sort = "{prop: 'date', order: 'descending'}"
        @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="40"></el-table-column>
    <el-table-column prop="id" label="团购规则ID" width="50"></el-table-column>
    <el-table-column  prop="goodsId" label="商品编号" width="100"> </el-table-column>
    <el-table-column prop="goodsName" label="名称" width="100"></el-table-column>
    <el-table-column prop="picUrl" label="图片" width="130">
      <template slot-scope="scope">            
        <img :src="scope.row.picUrl"  min-width="70" height="70" />
      </template>  
    </el-table-column>  
    <el-table-column prop="discount" label="团购优惠" width="130"></el-table-column>
    <el-table-column prop="discountMember"  label="团购要求" width="100"></el-table-column>
    <el-table-column prop="expireTime" label="结束时间" width="150" value-format="yyyy-MM-dd HH:mm:ss"></el-table-column>
    <el-table-column prop="status" label="状态" width="150" :formatter="formatter1"></el-table-column>
    <el-table-column label="操作" width="314"> 
      <template slot-scope="scope">
    <el-button @click="preUpdateObject(scope.row)" type="text" size="small" style="color:hotpink">编辑</el-button>
    <el-button @click="deleteByid(scope.row)" type="text" size="small" style="color:green">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
   <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total" >
    </el-pagination>
    <!-- 添加模态框 -->
    <el-dialog title="添加页面" :visible.sync="dialogFormVisible">
        <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="商品ID" prop="goodsId">
                <el-input v-model="form.goodsId"></el-input>
            </el-form-item>
            <el-form-item label="团队折扣" prop="discount">
                 <el-input v-model="form.discount"></el-input>
            </el-form-item>
             <el-form-item label="团购人数" prop="discountMember">
                <el-input v-model="form.discountMember"></el-input>
            </el-form-item>
            <el-form-item label="过期时间" prop="expireTime">
               <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期"  v-model="form.expireTime" style="width: 100%;"></el-date-picker>
            </el-form-item>     
            <el-form-item label="上架到页面" prop="deleted">
                <el-input v-model="form.deleted"></el-input>
            </el-form-item>          
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addObject('ruleForm')">添加</el-button>
        </div>
    </el-dialog>
    <!-- 修改模态框 -->
    <el-dialog title="修改页面" :visible.sync="dialogFormVisible1">
      <el-form :model="form">
        <el-input v-model="form.id" type="hidden"></el-input>
        <el-form-item label="商品ID" :label-width="formLabelWidth">
          <el-input v-model="form.goodsId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="团队折扣" :label-width="formLabelWidth">
          <el-input v-model="form.discount" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="团购人数" :label-width="formLabelWidth">
          <el-input v-model="form.discountMember" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="过期时间" :label-width="formLabelWidth">
           <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期"  v-model="form.expireTime" style="width: 100%;" autocomplete="off"></el-date-picker>
        </el-form-item>
        <el-form-item label="团购人数" :label-width="formLabelWidth">
          <el-input v-model="form.deleted" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="updGro()">确 定</el-button>
      </div>
    </el-dialog>
    <div>
    <canvas id="q"></canvas>
  </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      tableData: [],
      currentPage4:1,
      pageSizes:[1, 2, 3, 4],
      pageSize:3,
      goodsId:'',
      title: "",
      total:400,
      dialogFormVisible: false,
      dialogFormVisible1:false,
        form: {
          id:'',
          goodsId: '',
          discount: '',
          discountMember: '',
          expireTime:'',
          deleted:'',
        },
        formLabelWidth: '120px',
        rules:{
                 goodsId: [
          { required: true, message: "商品不能为空", trigger: "blur" },
          { min: 2, max: 10, message: "长度在 2 到 10个字符", trigger: "blur" }
        ],
        discount: [
          { required: true, message: "团购折扣不能为空", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 10个字符", trigger: "blur" }
        ],
        discountMember: [
          { required: true, message: "团购人数不能为空", trigger: "blur" },
          { min: 1, max: 1, message: "必须为阿拉伯数字1~9", trigger: "blur" }
        ],
        deleted: [
          { required: true, message: "不能为空，必须为0", trigger: "blur" },
          { min: 1, max: 3, message: "必须为0", trigger: "blur" }
        ],
        expireTime: [
          { required: true, message: "过期时间不能为空", trigger: "blur" },
          
        ]
    
        },
    }
  },
  methods:{
 // 列表页面
      getGro(){
        var $this = this;
            this.axios({
              method:'get',
              url: "http://localhost:8085/ecGrouponRules/grouponRulesList",
              params:{pageNum:this.currentPage4,pageSize:this.pageSize,
               goodsId:this.goodsId}
            }).then(function(res){
                console.log(res);
                $this.tableData = res.data.obj.list;
                $this.total = res.data.obj.total;
              
            });
      }, 
        // 分页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.getGro();
      },
       handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage4 = val;
        this.getGro();
      },
      formatter1(row) {
      if (row.status != null) {
        if (row.status == 0) {
          return "正常上线";
        } else if (row.status == 1) {
          return "到期自动下线";
        } else if (row.status == 2) {
          return "手动下线";
        }
      }
    },
    //全选
      handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log("点击复选框数据为:{}",this.multipleSelection);
      },
      preAddObject(){
          this.dialogFormVisible=true;
      },

      addObject(ruleForm){
        this.$refs[ruleForm].validate(valid => {
            if (valid) {
                var $this=this;
                console.log("form里的数据为:{}",this.form);
                this.axios({
                    method:'post',
                    url: "http://localhost:8085/ecGrouponRules/addGrouponRules",
                    params:this.form
                }).then(function(res){
                  console.log(".///////",res);
                    alert("添加成功！");
                    $this.dialogFormVisible=false;
                    $this.getGro();
                
                });
            }
        });
      },
        preUpdateObject(row){
        this.dialogFormVisible1=true;
        for (var i in this.form){
          this.form[i]=row[i];
        }
    },
    // 修改
       updGro(){
        var $this=this;
        this.axios({
            method:'put',
            url: "http://localhost:8085/ecGrouponRules/updateGrouponRules",
            params:this.form
        }).then(function(res){
           alert("修改成功");
            $this.dialogFormVisible1=false;
            $this.getGro();
        })
    },
       tableRowClassName({row, rowIndex}) {
         if(rowIndex === 0){
          return 'three-row';
        }
        else if (rowIndex === 1) {
          return 'success-row';
        } else if (rowIndex === 2) {
          return 'warning-row';
        }
        
        else if (rowIndex == 3) {
          return 'four-row';
        }
      },
      
  },
  mounted(){

    var canvas = document.getElementById("q");
    var $this = this;
    // this.axios({
    //   method: "post",
    //   url: "http://localhost:8085/ecgeneralize/alibaba/pay/createPayOrder",
    //   params: {
    //     //access_token: localStorage.getItem("access_token"),
    //     orderNo: new Date().getTime()
    //   }
    // }).then(function(res) {
    //     console.log("生成支付宝扫码二维码返回信息为{}",res);
    //    $this.QRCode.toCanvas(
    //     canvas,
    //     res.data.obj,
    //     function(error) {
    //       if (error) {
    //         console.error(error);
    //       }
    //       console.log("QRCode success!");
    //     }
    //   );
    // });
        this.getGro();
  }
}
</script>
<style>
  .el-table .warning-row {
    background: oldlace;
  }
  .el-table .three-row {
    background: rgb(250, 228, 232);
  }
  .el-table .success-row {
    background: #f0f9eb;
  }
  .el-table .four-row {
    background: rgb(212, 226, 238);
  }
</style>

